<script setup>
import { ref } from 'vue'
let products = ref([])
// 初始化数据
products.value = [
  {
    name: '商品1',
    img: 'https://img0.baidu.com/it/u=605333667,4136734500&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    price: 1999,
    stock: 100
  },
  {
    name: '商品2',
    img: 'https://img1.baidu.com/it/u=1781746235,761723580&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=573',
    price: 2899,
    stock: 200
  },
  {
    name: '商品3',
    img: 'https://img2.baidu.com/it/u=3746622379,3234375573&fm=253&fmt=auto?w=548&h=500',
    price: 1999,
    stock: 300
  },
  {
    name: '商品4',
    img: 'https://img2.baidu.com/it/u=3801067378,3058468681&fm=253&fmt=auto&app=138&f=PNG?w=500&h=548',
    price: 1999,
    stock: 400
 }
]
</script>

<template>
  <el-table :data="products" style="width: 100%">
  <el-table-column prop="name" label="商品名称"></el-table-column>
  <el-table-column prop="img" label="商品图片" style="width: 300px" >
    <template v-slot="scope">
      <img :src="scope.row.img" alt="" width="100">
    </template>
  </el-table-column>
  <el-table-column prop="price" label="价格"></el-table-column>
  <el-table-column prop="stock" label="库存"></el-table-column>
  <el-table-column label="操作">
    <template v-slot="scope">
      <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
      <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
</template>

<style scoped>

</style>
